/* ==========================================================================
   HRMS-style theme (sidebar, topbar, app launcher, dashboard, login)
   Loaded AFTER style.css on: side-bar.html, top-bar.html, index.html, login.html
   Selectors below are scoped to classes only used on these 4 surfaces —
   verified not reused elsewhere in the app before adding this file.
   To revert: unlink this file from those 4 pages.
   ========================================================================== */

:root {
  --hrms-primary: #2B4C7E;
  --hrms-primary-dark: #1E3A5F;
  --hrms-primary-hover: #22406B;
  --hrms-violet: #1E3A5F;
  --hrms-sky: #0ea5e9;
  --hrms-amber: #eeba44;
  --hrms-tint-50: #eef3f9;
  --hrms-tint-100: #dbe6f2;
  --hrms-tint-200: #b3cae2;
  --hrms-text: #0e1430;
  --hrms-text-muted: #5b6280;
  --hrms-text-dim: #8b91a8;
  --hrms-border: #e5e8f0;
  --hrms-surface-2: #fafbfd;
  --hrms-glass: rgba(255, 255, 255, 0.72);
  --hrms-glass-strong: rgba(255, 255, 255, 0.85);
  --hrms-glass-border: rgba(255, 255, 255, 0.6);
  --hrms-glass-shadow: 0 8px 30px rgba(18, 26, 40, 0.12);
  --hrms-radius-lg: 14px;
  --hrms-gradient: linear-gradient(135deg, #2B4C7E 0%, #1E3A5F 100%);
}

/* -------------------------------------------------------------------- */
/* Sidebar                                                               */
/* -------------------------------------------------------------------- */

/* ---- HRMS off-canvas drawer sidebar ----
   The sidebar is HIDDEN by default and slides in over the content as an
   overlay (like HRMS). The pcoded template applies navbar-theme="theme1"
   (dark) via JS; those rules have specificity 0,3,1, so we match/beat them
   by scoping to [navbar-theme] and loading after style.css. Positioning is
   forced with !important so pcoded's vertical-nav-type toggling can't move it. */
.pcoded .pcoded-navbar,
.pcoded .pcoded-navbar[navbar-theme],
.pcoded .pcoded-navbar[navbar-theme="theme1"] {
  position: fixed !important;
  top: 12px !important;
  left: 12px !important;
  /* 100vh first as the fallback for anything without dvh. On mobile Chrome 100vh
     is the LARGE viewport (URL bar hidden), so with the bar showing the last
     ~60-90px of the drawer sits under the browser chrome — and that is exactly
     where .hrms-sidebar-footer pins the user card and Logout. dvh tracks the
     viewport that is actually on screen, so the footer stays reachable. */
  height: calc(100vh - 24px) !important;
  height: calc(100dvh - 24px) !important;
  /* Never wider than the screen, and always leave a strip of backdrop to tap to
     dismiss: on a 320px phone this yields 248px of drawer and 60px of backdrop. */
  width: min(260px, calc(100vw - 72px)) !important;
  margin-top: 0 !important;
  /* ⚠️ LOAD-BEARING — DO NOT DROP THESE TWO. See the note below on pcoded's own
     off-canvas mode, which parks the panel at margin-left:-240px on phones. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 18px !important;
  transform: translateX(calc(-100% - 24px));
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1200 !important;
  background: #ffffff !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--hrms-border) !important;
  box-shadow: 0 18px 50px rgba(20, 25, 64, 0.16) !important;
  overflow-x: hidden;
  overflow-y: auto;
  /* Momentum scrolling on iOS, and don't chain to the page when the menu bottoms out. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(43, 76, 126, 0.25) transparent;
}

/* ---- Keep the drawer's geometry independent of pcoded's layout attributes ----
   THE PHONE BUG THIS FIXES: pcoded.min.js re-labels the layout by viewport width.
   On a phone or tablet it sets, on the .pcoded wrapper,
       pcoded-device-type="phone"|"tablet"  vertical-nav-type="offcanvas"  vertical-effect="overlay"
   (measured: Pixel 7 412px and Galaxy S9+ 320px report "phone", iPad 810px "tablet";
   a 1440px desktop stays "desktop"/"expanded"). Those attributes activate the
   TEMPLATE'S OWN off-canvas mechanism, style.css:11888 —
       .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="offcanvas"][vertical-effect="overlay"] .pcoded-navbar
       { width: 240px; margin-left: -240px; }
   — which parks the panel 240px to the left and expects pcoded's own toggle to
   slide it back by animating that margin. The kōami drawer slides with `transform`
   instead and never cleared the margin, so on a phone `hrms-drawer-open` set
   translateX(0) and the panel was STILL at x = 12 - 240 = -228: a 260px drawer with
   a 32px sliver on screen. Tapping the hamburger dimmed the page and showed no menu.
   Desktop was unaffected only because vertical-nav-type stays "expanded" there and
   the margin is 0 — which is why this looked like a mobile-only fault.

   The legacy declarations are plain (no !important), so the `margin-left: 0 !important`
   in the base rule above is enough to outrank them whatever their specificity.
   The ONE legacy declaration that is !important needs matching specificity instead: */
body .pcoded[pcoded-device-type="phone"][vertical-nav-type] .pcoded-navbar,
body .pcoded[pcoded-device-type="tablet"][vertical-nav-type] .pcoded-navbar {
  /* style.css:15958 forces `position: absolute !important` on a phone/tablet the
     moment vertical-nav-type becomes "expanded" — which would take the drawer out
     of the viewport's frame of reference and let it scroll away with the document.
     Same specificity as that rule (0,4,1) and this file loads after style.css, so
     this wins. Written with a bare [vertical-nav-type] so it holds for every value
     pcoded can put there, not just the one that breaks today. */
  position: fixed !important;
}

/* The drawer is modal — the backdrop covers the page — so the page behind it must
   not scroll under the finger. Without this, dragging on a phone scrolls the content
   instead of the menu. */
body.hrms-drawer-open {
  overflow: hidden !important;
}
/* NOT `touch-action: none` on the body: touch-action is resolved as the INTERSECTION
   of the values from the touched element up through its ancestors, so blocking it on
   the body would also block panning INSIDE the drawer and the menu would not scroll.
   `overflow: hidden` here plus `overscroll-behavior: contain` on the drawer does the
   job without that trap. */

/* Subtle, thin sidebar scrollbar (replaces the default chunky black/grey one) */
.pcoded .pcoded-navbar::-webkit-scrollbar,
.pcoded .pcoded-navbar[navbar-theme]::-webkit-scrollbar {
  width: 6px;
}
.pcoded .pcoded-navbar::-webkit-scrollbar-track,
.pcoded .pcoded-navbar[navbar-theme]::-webkit-scrollbar-track {
  background: transparent;
}
.pcoded .pcoded-navbar::-webkit-scrollbar-thumb,
.pcoded .pcoded-navbar[navbar-theme]::-webkit-scrollbar-thumb {
  background: rgba(43, 76, 126, 0.22);
  border-radius: 999px;
}
.pcoded .pcoded-navbar::-webkit-scrollbar-thumb:hover,
.pcoded .pcoded-navbar[navbar-theme]::-webkit-scrollbar-thumb:hover {
  background: rgba(43, 76, 126, 0.4);
}

/* Open state (toggled by the hamburger) */
body.hrms-drawer-open .pcoded .pcoded-navbar,
body.hrms-drawer-open .pcoded-navbar,
.pcoded.hrms-drawer-open .pcoded-navbar {
  transform: translateX(0) !important;
}

/* Content spans full width — the drawer overlays, it doesn't push.
   Zero the top margin pcoded's JS adds (= header height); the sticky
   header already occupies that space in flow, so it would double up. */
.pcoded .pcoded-main-container,
.pcoded .pcoded-content,
.pcoded-content {
  margin-left: 0 !important;
}

.pcoded .pcoded-main-container {
  margin-top: 0 !important;
}

/* Dimmed backdrop behind the open drawer */
.hrms-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 25, 64, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
  z-index: 1150;
}

body.hrms-drawer-open .hrms-drawer-backdrop {
  opacity: 1;
  visibility: visible;
}

.pcoded .pcoded-navbar[navbar-theme] .main-menu,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .main-menu,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .main-menu .main-menu-header {
  background: transparent !important;
  background-color: transparent !important;
}

.pcoded-navbar .pcoded-inner-navbar {
  background: transparent;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Sidebar footer — user card + logout, pinned to the bottom so it fills the
   empty space under a short menu (margin-top:auto pushes it down). */
.hrms-sidebar-footer {
  margin-top: auto;
  padding: 12px 12px 14px;
  border-top: 1px solid var(--hrms-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hrms-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px;
}

.hrms-sidebar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--hrms-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex: 0 0 auto;
}

.hrms-sidebar-user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.hrms-sidebar-user-meta b {
  font-size: 12.5px;
  color: var(--hrms-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hrms-sidebar-user-meta small {
  font-size: 10.5px;
  color: var(--hrms-text-dim);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hrms-sidebar-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--hrms-border);
  background: #fff;
  color: var(--hrms-text-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hrms-sidebar-logout:hover {
  background: rgba(254, 93, 112, 0.08);
  border-color: rgba(254, 93, 112, 0.35);
  color: #fe5d70;
}

.hrms-sidebar-logout i {
  font-size: 15px;
}

/* Sidebar role header (matches HRMS "● ROLE  ✕" header) */
.hrms-sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 12px 16px;
  border-bottom: 1px solid var(--hrms-border);
  margin-bottom: 6px;
  /* subtle tinted header box with rounded top, like the reference.
     Split into colour + image (rather than the `background` shorthand) so the
     opaque white underneath survives when this becomes sticky below. */
  background-color: #fff;
  background-image: linear-gradient(180deg, var(--hrms-tint-50), rgba(238, 242, 255, 0));
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  /* Pinned so the Close (X) is always reachable. side-bar.html scrolls the ACTIVE
     menu item into view on open, and on a page whose item sits far down the list
     that scrolls the header off the top — measured on index.html, where the X
     opened at y = -125, i.e. above the drawer. On a phone, where the backdrop is a
     thin strip, that left tapping outside as the only way to close the menu. */
  position: sticky;
  top: 0;
  z-index: 3;
}

.hrms-sidebar-close {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: var(--hrms-surface-2);
  color: var(--hrms-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.hrms-sidebar-close:hover {
  background: var(--hrms-tint-50);
  color: var(--hrms-primary);
}

.hrms-online-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  flex: 0 0 auto;
}

.hrms-sidebar-role {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hrms-text-dim);
}

.pcoded .pcoded-navbar[navbar-theme] .pcoded-navigatio-lavel,
.pcoded-navigatio-lavel {
  color: var(--hrms-text-dim) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: transparent !important;
  padding: 10px 16px 4px !important;
  margin: 0 !important;
}

/* Compact sidebar menu icons */
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li > a > .pcoded-micon i,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li > a > .pcoded-micon i {
  font-size: 14px !important;
}

/* Nav items — compact rows (match reference: small text, small icons, tight). */
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li > a,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li > a {
  color: var(--hrms-text-muted) !important;
  border-radius: 8px;
  margin: 1px 10px;
  padding: 6px 12px !important;
  border-left: none !important;
  border-bottom-color: transparent !important;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3 !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li:hover > a,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li:hover > a {
  background: var(--hrms-tint-50) !important;
  color: var(--hrms-primary) !important;
}

.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li.active > a,
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li.pcoded-trigger > a,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li.active > a,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li.active:hover > a {
  position: relative !important;
  background: var(--hrms-tint-100) !important;
  color: var(--hrms-primary-dark) !important;
  border-left: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  font-weight: 600;
}

/* Kill the template's left-edge active indicator bar on NON-active items */
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li > a:before,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li > a:before {
  display: none !important;
  border: none !important;
}

/* Clean straight indigo accent bar on the active / open item (HRMS style) */
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li.active > a:before,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li.active > a:before,
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li.pcoded-trigger > a:before,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li.pcoded-trigger > a:before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 56% !important;
  border-radius: 3px !important;
  background: var(--hrms-primary) !important;
  border: none !important;
}

.pcoded .pcoded-navbar[navbar-theme] .pcoded-item,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item {
  border: none !important;
}

.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li > a > .pcoded-micon i {
  color: var(--hrms-text-dim) !important;
}

.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li.active > a > .pcoded-micon i,
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li.pcoded-trigger > a > .pcoded-micon i {
  color: var(--hrms-primary) !important;
}

/* Force the label text span to follow the anchor colour (fixes white-on-light
   text that the dark theme applied to .pcoded-mtext on hover/active/trigger) */
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li > a > .pcoded-mtext {
  color: inherit !important;
}

.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li:hover > a,
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li:hover > a > .pcoded-mtext,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li.pcoded-hasmenu:hover > a,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li.pcoded-trigger > a,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li.pcoded-trigger > a > .pcoded-mtext {
  color: var(--hrms-primary) !important;
}

.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li:hover > a > .pcoded-micon i,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li.pcoded-trigger > a > .pcoded-micon i {
  color: var(--hrms-primary) !important;
}

/* hasmenu caret arrow follows text on hover/trigger */
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li.pcoded-hasmenu:hover > a:after,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li.pcoded-hasmenu.pcoded-trigger > a:after {
  color: var(--hrms-primary) !important;
}

/* dropdown caret arrows */
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li.pcoded-hasmenu > a:after,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li.pcoded-hasmenu .pcoded-submenu li.pcoded-hasmenu > a:after {
  color: var(--hrms-text-dim) !important;
}

/* submenus */
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item li.pcoded-hasmenu .pcoded-submenu,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item li.pcoded-hasmenu .pcoded-submenu {
  background: rgba(238, 242, 255, 0.55) !important;
}

.pcoded .pcoded-navbar[navbar-theme] .pcoded-item li.pcoded-hasmenu .pcoded-submenu li > a,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item li.pcoded-hasmenu .pcoded-submenu li > a {
  color: var(--hrms-text-muted) !important;
  border-bottom-color: transparent !important;
}

.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li:hover > a,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li.active > a {
  background-color: var(--hrms-tint-100) !important;
  color: var(--hrms-primary) !important;
  font-weight: 600;
}

/* Submenu polish: transparent panel, indented rounded rows, and kill the
   pcoded template's connector line / left-border (which showed as a stray
   coloured bar next to the open submenu). */
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item li.pcoded-hasmenu .pcoded-submenu,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item li.pcoded-hasmenu .pcoded-submenu {
  background: transparent !important;
  border-left: none !important;
  padding: 2px 0 4px !important;
}

.pcoded .pcoded-navbar[navbar-theme] .pcoded-item li.pcoded-hasmenu .pcoded-submenu:before,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item li.pcoded-hasmenu .pcoded-submenu:before,
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item li.pcoded-hasmenu .pcoded-submenu li > a:before,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item li.pcoded-hasmenu .pcoded-submenu li > a:before {
  display: none !important;
  border: none !important;
  background: transparent !important;
  content: none !important;
}

/* Sub-item indent. The parent row is `padding-left:12px` + a 23px icon + ~10px gap, so a
   top-level LABEL starts 45px in from the item's left edge. The submenu rows were
   `margin-left:26px` + `padding-left:12px`, which put every child label 17px to the LEFT of
   its own parent's label — the hierarchy read as broken rather than nested. Measured in the
   browser, `margin-left:43px` lines the child labels up exactly under the parent label. */
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item li.pcoded-hasmenu .pcoded-submenu li > a,
.pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item li.pcoded-hasmenu .pcoded-submenu li > a {
  border-left: none !important;
  border-radius: 7px;
  margin: 1px 10px 1px 43px;
  padding: 5px 12px !important;
  font-size: 12px;
}

/* -------------------------------------------------------------------- */
/* Topbar                                                                */
/* -------------------------------------------------------------------- */

/* Soft lavender page background so white cards + the curved topbar pop (HRMS) */
.pcoded,
.pcoded .pcoded-main-container,
.pcoded .pcoded-content {
  background: #f3f3fb !important;
}

/* Floating "in air" topbar — a rounded white card detached from the screen
   edges, hovering over the lavender page background with a soft shadow. */
.pcoded-header,
.pcoded-header.hrms-header {
  background: #fff !important;
  box-shadow: 0 12px 30px rgba(20, 25, 64, 0.13), 0 2px 6px rgba(20, 25, 64, 0.06) !important;
  border: 1px solid rgba(43, 76, 126, 0.08) !important;
  border-radius: 27px !important;
  position: sticky !important;
  top: 12px !important;
  left: 0 !important;
  margin: 12px 20px 10px !important;
  width: calc(100% - 40px) !important;
  z-index: 1030 !important;
  overflow: visible !important;
}

/* floating card has no gradient underline */
.pcoded-header.hrms-header::after {
  content: none !important;
}

/* Brand now lives inline inside the bar — hide the separate logo block */
.pcoded .pcoded-header .navbar-logo,
.hrms-header .navbar-logo,
.hrms-brand {
  display: none !important;
}

/* Wrapper must stay transparent — the rounded white card is the .pcoded-header
   itself. A white bg here would paint a square over the header's curved corners. */
.hrms-header .navbar-wrapper {
  background: transparent !important;
  border-radius: inherit !important;
}

/* Topbar container becomes a flex row holding the flat bar */
.hrms-header .navbar-container {
  display: flex !important;
  align-items: center;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: inherit !important;
}

/* The flat bar that holds all topbar controls */
.hrms-topbar-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0 16px;
  height: 54px;
}

/* Hamburger — white squircle button with a hairline border */
.hrms-burger {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--hrms-border);
  color: var(--hrms-text);
  cursor: pointer;
  font-size: 18px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  flex: 0 0 auto;
}
.hrms-burger:hover {
  background: var(--hrms-tint-50);
  border-color: var(--hrms-tint-200);
  color: var(--hrms-primary);
}

/* Inline brand logo (shown in place of the company name — per-branch logo
   swapped in by applyBrandLogos(), falls back to the Kōami wordmark) */
.hrms-brand-inline {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
  margin: 0 6px 0 6px;
}
.hrms-brand-inline:hover { text-decoration: none; }

.hrms-brand-logo {
  height: 28px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}

/* Vertical hairline divider */
.hrms-vdiv {
  width: 1px;
  height: 26px;
  background: var(--hrms-border);
  flex: 0 0 auto;
  margin: 0 3px;
}

.hrms-icon-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: var(--hrms-surface-2);
  color: var(--hrms-text-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
  font-size: 16px;
}

.hrms-icon-btn:hover {
  background: var(--hrms-tint-50);
  color: var(--hrms-primary);
}

/* Circular icon buttons — app launcher + notifications */
.hrms-round-btn {
  position: relative;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hrms-border);
  background: #fff;
  color: var(--hrms-text-muted);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  text-decoration: none;
  font-size: 17px;
  flex: 0 0 auto;
}
.hrms-round-btn:hover {
  background: var(--hrms-tint-50);
  border-color: var(--hrms-tint-200);
  color: var(--hrms-primary);
}

/* Notification bell + dropdown */
.hrms-bell-wrap { position: relative; flex: 0 0 auto; }
.hrms-bell-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  border: 2px solid #fff;
  display: none;
}
.hrms-bell-badge.show { display: block; }
.hrms-bell-pop {
  position: absolute;
  top: 56px;
  right: 0;
  width: 344px;
  max-width: 88vw;
  background: #fff;
  border: 1px solid var(--hrms-border);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(20, 25, 64, 0.18);
  z-index: 1400;
  overflow: hidden;
  display: none;
}
.hrms-bell-pop.open { display: block; }
.hrms-bell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--hrms-border);
}
.hrms-bell-head b { font-size: 13.5px; color: var(--hrms-text); }
.hrms-bell-head a { font-size: 11.5px; color: var(--hrms-primary); cursor: pointer; }
.hrms-bell-list { max-height: 342px; overflow-y: auto; }
.hrms-bell-row {
  display: flex;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--hrms-surface-2);
  cursor: pointer;
  transition: background .12s ease;
}
.hrms-bell-row:hover { background: var(--hrms-tint-50); }
.hrms-bell-row .b-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: transparent; margin-top: 5px; flex: 0 0 auto;
}
.hrms-bell-row.unread .b-dot { background: var(--hrms-primary); }
.hrms-bell-row .b-tx { display: flex; flex-direction: column; min-width: 0; }
.hrms-bell-row .b-tx b {
  font-size: 12.5px; color: var(--hrms-text); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hrms-bell-row .b-tx span { font-size: 11px; color: var(--hrms-text-dim); }
.hrms-bell-empty { padding: 26px 16px; text-align: center; color: var(--hrms-text-dim); font-size: 12px; }
.hrms-bell-foot { padding: 11px 16px; text-align: center; border-top: 1px solid var(--hrms-border); }
.hrms-bell-foot a { font-size: 12px; color: var(--hrms-primary); font-weight: 600; }

/* Cost-center / branch switcher — borderless: building icon + name/subline + chevron */
.hrms-branch {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 232px;
  max-width: 232px;
  min-width: 0;
  flex: 0 0 auto;
  height: 42px;
  padding: 0 6px;
  border-radius: 11px;
  overflow: hidden;
  cursor: pointer;
  transition: background .15s ease;
}
.hrms-branch:hover { background: var(--hrms-tint-50); }

.hrms-branch-ic {
  width: auto;
  height: auto;
  border-radius: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--hrms-text-dim);
  font-size: 19px;
}

.hrms-branch-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  line-height: 1.2;
}

.hrms-branch-sub {
  font-size: 10.5px;
  color: var(--hrms-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* select2 renders the top (name) line: bold, borderless, chevron on the right */
.hrms-header #costCenter #branchList,
.hrms-header #costCenter .select2-container,
.hrms-header .hrms-branch .select2-container {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.hrms-branch .select2-container--default .select2-selection--single {
  border: none !important;
  background: transparent !important;
  height: auto !important;
}

.hrms-branch .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--hrms-text) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 20px 0 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hrms-branch .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 18px !important;
  top: 50% !important;
  transform: translateY(-50%);
  right: 0 !important;
}
.hrms-branch .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--hrms-text-muted) transparent transparent transparent !important;
}

#branchList {
  border: none !important;
  background: transparent !important;
  color: var(--hrms-text) !important;
  font-weight: 700;
  font-size: 13px;
  height: auto !important;
}

/* Search pill (opens app launcher) — wide, centered */
.hrms-topbar-search {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f4f5f8;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 16px;
  height: 38px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow .15s ease;
  min-width: 160px;
  max-width: 760px;
  margin: 0 8px;
}

.hrms-topbar-search:hover {
  border-color: var(--hrms-tint-200);
  background: #fff;
  box-shadow: 0 2px 10px rgba(43, 76, 126, 0.06);
}

.hrms-topbar-search i {
  color: var(--hrms-text-dim);
  font-size: 17px;
}

.hrms-topbar-search input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13.5px;
  color: var(--hrms-text);
  cursor: pointer;
  min-width: 0;
}

.hrms-topbar-search input::placeholder {
  color: var(--hrms-text-dim);
}

.hrms-kbd {
  font-size: 12px;
  font-weight: 600;
  color: var(--hrms-text-muted);
  background: #eef0f5;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 3px 8px;
  white-space: nowrap;
  letter-spacing: .2px;
}

/* User profile */

/* The user block reuses the legacy `.user-profile` class, whose style.css rule
   is `padding: 20px 0` — that made the block 80px tall inside a 54px bar. */
.hrms-user.user-profile {
  padding: 0 !important;
  display: flex;
  align-items: center;
}

.hrms-user-toggle {
  display: flex !important;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 2px 4px;
}

.hrms-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--hrms-gradient);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 4px 12px rgba(43, 76, 126, 0.28);
}

.hrms-user-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
  max-width: 150px;
  min-width: 0;
}

/* Both lines are stacked by the flex column above — never let a page's own
   stylesheet reposition them. Several hundred screens ship a stray
   `small { position: relative; bottom: 8px }` rule, which used to lift the role
   line 8px up so it overlapped the user name. */
.hrms-user-meta b,
.hrms-user-meta small {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  display: block;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hrms-user-meta b {
  font-size: 13px;
  color: var(--hrms-primary);
  font-weight: 700;
  line-height: 1.25;
}

.hrms-user-meta small {
  font-size: 11px;
  color: var(--hrms-text-dim);
  line-height: 1.25;
}

.hrms-user-toggle .icon-chevron-down {
  color: var(--hrms-text-dim);
  font-size: 16px;
}

@media (max-width: 991.98px) {
  .hrms-branch-body { display: none; }
  .hrms-branch { width: auto; max-width: none; }
}
@media (max-width: 767.98px) {
  .hrms-topbar-search { display: none; }
  .hrms-user-meta { display: none; }
  .hrms-vdiv { display: none; }
}

/* -------------------------------------------------------------------- */
/* App launcher                                                         */
/* -------------------------------------------------------------------- */

.app-launcher-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 76, 126, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 99999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8vh;
}

.app-launcher-overlay.open {
  display: flex;
}

.app-launcher-panel {
  width: 920px;
  max-width: 94vw;
  max-height: 78vh;
  background: var(--hrms-glass-strong);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--hrms-glass-border);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(43, 76, 126, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-launcher-header {
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.9), rgba(224, 231, 255, 0.72));
  padding: 18px 22px;
  border-bottom: 1px solid var(--hrms-border);
}

.app-launcher-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-launcher-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-launcher-title-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--hrms-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.app-launcher-title h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--hrms-text);
}

.app-launcher-title small {
  color: var(--hrms-text-dim);
  font-size: 11px;
}

.app-launcher-close {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.6);
  color: var(--hrms-text-muted);
  cursor: pointer;
  font-size: 14px;
}

.app-launcher-close:hover {
  background: #fff;
  color: var(--hrms-primary);
}

#appLauncherSearch {
  margin-top: 12px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--hrms-border);
  background: rgba(255, 255, 255, 0.7);
  padding: 8px 12px;
  font-size: 13px;
}

#appLauncherSearch:focus {
  outline: none;
  border-color: var(--hrms-primary);
  background: #fff;
}

.app-launcher-body {
  padding: 16px 22px 22px;
  overflow-y: auto;
}

.app-launcher-section {
  margin-bottom: 18px;
}

.app-launcher-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hrms-text-dim);
  margin-bottom: 10px;
}

.app-launcher-section-bar {
  width: 4px;
  height: 12px;
  border-radius: 2px;
}

.app-launcher-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.app-launcher-tile {
  width: 104px;
  padding: 10px 6px;
  border-radius: 14px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  display: block;
}

.app-launcher-tile:hover {
  background: #fff;
  box-shadow: 0 10px 24px rgba(20, 25, 64, 0.12);
  text-decoration: none;
}

.app-launcher-tile.kbd-active {
  background: #fff;
  box-shadow: 0 0 0 2px var(--hrms-primary), 0 10px 24px rgba(43, 76, 126, 0.18);
}

.app-launcher-tile-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 6px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.app-launcher-tile:hover .app-launcher-tile-icon {
  transform: scale(1.12) translateY(-3px);
}

.app-launcher-tile-label {
  font-size: 11px;
  color: var(--hrms-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.app-launcher-empty {
  text-align: center;
  color: var(--hrms-text-dim);
  padding: 40px 0;
  font-size: 13px;
}

/* -------------------------------------------------------------------- */
/* App launcher — favourites                                             */
/* -------------------------------------------------------------------- */

/* The star has to be a real <button>, and an <a> may not contain one, so each
   tile now sits in a positioned wrapper with the star as its sibling. The
   wrapper keeps the tile's 104px width so launcherColumnCount()'s arithmetic
   (grid width / tile width) is unchanged. */
.app-launcher-tile-wrap {
  position: relative;
  width: 104px;
}

.app-launcher-fav {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: var(--hrms-text-dim);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(20, 25, 64, 0.08);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;

  /* Hidden until the tile is hovered, so 200+ tiles are not covered in stars.
     A tile that IS a favourite overrides this below and shows its star always —
     otherwise there is no way to see what is starred without hovering. */
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.app-launcher-tile-wrap:hover .app-launcher-fav,
.app-launcher-fav:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.app-launcher-fav:hover {
  color: #f59e0b;
  background: #fff;
}

.app-launcher-fav.is-on {
  opacity: 1;
  transform: scale(1);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.35);
  background: #fffaf0;
}

.app-launcher-fav:focus-visible {
  outline: 2px solid var(--hrms-primary);
  outline-offset: 1px;
}

/* The favourites section is pinned above the modules and separated by a rule,
   so it reads as the user's own shelf rather than one more module group. */
.app-launcher-section.is-favourites {
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(20, 25, 64, 0.08);
}

.app-launcher-fav-hint {
  font-size: 12px;
  color: var(--hrms-text-dim);
  padding: 6px 2px 2px;
}

.app-launcher-fav-hint i {
  color: #f59e0b;
  margin: 0 2px;
}

@media (prefers-reduced-motion: reduce) {
  .app-launcher-fav { transition: none; }
}

/* -------------------------------------------------------------------- */
/* Dashboard                                                             */
/* -------------------------------------------------------------------- */

.hrms-hero {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.85), rgba(238, 242, 255, 0.6));
  border: 1px solid var(--hrms-glass-border);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(18, 26, 40, 0.06);
  padding: 14px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.hrms-hero-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hrms-primary);
  margin-bottom: 2px;
}

.hrms-hero h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--hrms-text);
}

.hrms-hero-date {
  color: var(--hrms-text-dim);
  font-size: 12px;
  margin-top: 2px;
}

/* Compact KPI cards */
.hrms-kpi-row {
  margin-left: -8px;
  margin-right: -8px;
}

.hrms-kpi-row > [class*="col-"] {
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 16px;
}

.hrms-kpi-row .card {
  border-radius: 12px !important;
  background: #fff !important;
  border: 1px solid var(--hrms-glass-border) !important;
  box-shadow: 0 2px 10px rgba(20, 25, 64, 0.04) !important;
  margin-bottom: 0 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hrms-kpi-row .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20, 25, 64, 0.08) !important;
}

.hrms-kpi-row .card .card-block {
  padding: 14px 16px !important;
}

.hrms-kpi-row .card h6 {
  font-size: 12px !important;
  margin-bottom: 4px !important;
  font-weight: 600;
}

.hrms-kpi-row .card h2 {
  font-size: 24px !important;
  font-weight: 700;
  line-height: 1.1;
}

.hrms-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

/* Compact shortcut tiles */
#shortcutWrapper .shortcutId {
  min-height: auto !important;
}

#shortcutWrapper .card {
  border-radius: 12px !important;
  border: 1px solid var(--hrms-glass-border) !important;
  box-shadow: 0 2px 10px rgba(20, 25, 64, 0.04) !important;
}

#shortcutWrapper .card-block {
  padding: 14px 10px !important;
}

#shortcutWrapper .card-Nav img {
  height: 40px !important;
}

#shortcutWrapper .fontSize {
  font-size: 13px !important;
  margin-top: 8px !important;
}

/* -------------------------------------------------------------------- */
/* Login                                                                 */
/* -------------------------------------------------------------------- */

.hrms-login-block {
  min-height: 100vh;
  display: flex;
  background: #f6f7fb;
}

.hrms-login-brand {
  flex: 0 0 42%;
  position: relative;
  overflow: hidden;
  background: var(--hrms-gradient);
  color: #fff;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hrms-login-blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(60px);
}

.hrms-login-blob.one {
  width: 320px;
  height: 320px;
  background: rgba(255, 255, 255, 0.12);
  top: -80px;
  left: -80px;
}

.hrms-login-blob.two {
  width: 280px;
  height: 280px;
  background: rgba(238, 186, 68, 0.28);
  bottom: -70px;
  right: -70px;
}

.hrms-login-brand-inner {
  position: relative;
  z-index: 1;
}

.hrms-login-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
}

.hrms-login-logo-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.hrms-login-logo span {
  font-size: 19px;
  font-weight: 700;
}

.hrms-login-brand h1 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 16px;
}

.hrms-login-brand p {
  font-size: 14px;
  opacity: 0.85;
  max-width: 380px;
  margin-bottom: 32px;
}

.hrms-login-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hrms-login-stat {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 12px;
  min-width: 120px;
}

.hrms-login-stat b {
  display: block;
  font-size: 16px;
}

.hrms-login-form-side {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.hrms-login-form-side .auth-box {
  width: 380px;
  max-width: 100%;
  border-radius: var(--hrms-radius-lg) !important;
  box-shadow: var(--hrms-glass-shadow) !important;
  border: 1px solid var(--hrms-border);
}

.hrms-login-form-side #loginMessage,
.hrms-login-form-side .text-inverse {
  color: var(--hrms-primary) !important;
}

.hrms-login-form-side .form-control {
  border-color: var(--hrms-border) !important;
}

.hrms-login-form-side .form-control:focus {
  border-color: var(--hrms-primary) !important;
  box-shadow: 0 0 0 3px var(--hrms-tint-100) !important;
}

.hrms-login-form-side button[type="submit"],
.hrms-login-form-side .btn-primary {
  background: var(--hrms-primary) !important;
  border-color: var(--hrms-primary) !important;
}

.hrms-login-form-side button[type="submit"]:hover {
  background: var(--hrms-primary-hover) !important;
  border-color: var(--hrms-primary-hover) !important;
}

@media (max-width: 900px) {
  .hrms-login-brand {
    display: none;
  }
}